<template>
  <a-modal
    :open="createModel"
    title="预定场地"
    :width="900"
    :maskClosable="false"
    :confirmLoading="createLoading"
    @ok="submitCreate"
    @cancel="cancelCreate"
  >
    <a-divider />
    <a-form
      name="basic"
      ref="createFormRef"
      :model="createForm"
      :rules="createFormRules"
      :label-col="{ style: { width: '120px' } }"
      autocomplete="off"
    >
      <a-form-item label="场地" name="siteNumbers">
        <a-checkbox-group v-model:value="createForm.siteNumbers" name="radioGroup">
          <a-checkbox v-for="item in venueInfo.venueNumber" :key="item" :value="item"
            >场地{{ item }}</a-checkbox
          >
        </a-checkbox-group>
      </a-form-item>
      <a-form-item label="订场类型" name="dueType">
        <a-radio-group
          v-model:value="createForm.dueType"
          name="radioGroup"
          :options="dueTypeList"
        />
      </a-form-item>
      <a-form-item label="订场日期" name="dueDateRange">
        <a-range-picker v-model:value="createForm.dueDateRange" class="input-01" />
      </a-form-item>
      <a-form-item label="订场时间" name="dueTimeRange">
        <a-time-range-picker
          v-model:value="createForm.dueTimeRange"
          class="input-01"
          format="HH:mm"
          :hideDisabledOptions="true"
          :minuteStep="30"
          :disabledTime="disabledTime"
        />
      </a-form-item>
      <a-form-item label="顾客名称" name="customerName">
        <a-input
          v-model:value="createForm.customerName"
          class="input-01"
          show-count
          :maxlength="100"
        />
      </a-form-item>
      <a-form-item label="手机尾号" name="mobile">
        <a-input v-model:value="createForm.mobile" class="input-01" show-count :maxlength="100" />
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-textarea
          v-model:value="createForm.remark"
          :rows="2"
          class="input-01"
          show-count
          :maxlength="600"
        />
      </a-form-item>
    </a-form>
    <a-divider />
  </a-modal>
</template>
<script setup lang="ts" name="ReservationCreate">
import type { CreateForm, VenueInfo } from '#/reserve-home'
import { message } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form'
import { computed, reactive, ref, watch, type UnwrapRef } from 'vue'
import { addVenueReservation } from '@/api/reserve-home'
import dayjs, { Dayjs } from 'dayjs'

const emit = defineEmits(['update:createModel', 'createSuccess'])
const props = defineProps({
  createModel: {
    type: Boolean,
    default: false
  },
  venueInfo: {
    type: Object,
    default: () => {}
  },
  currentDate: {
    type: String,
    default: ''
  },
  createVenue: {
    type: Array,
    default: () => []
  },
  createTime: {
    type: String,
    default: ''
  }
})
const createModel = computed(() => props.createModel)
const venueInfo = computed(() => props.venueInfo as VenueInfo)
const currentDate = computed(() => props.currentDate)
const createVenue = computed(() => props.createVenue as number[])
const createTime = computed(() => props.createTime)

const dueTypeList = [
  { label: '锁定', value: 1 },
  { label: '付费', value: 2 },
  { label: '预定', value: 3 }
]
const createLoading = ref(false)
const createFormRef = ref()
const createForm: UnwrapRef<CreateForm> = reactive({
  siteNumbers: [],
  dueType: 1,
  dueStartTime: undefined,
  dueEndTime: undefined,
  dueStartDate: undefined,
  dueEndDate: undefined,
  customerName: '',
  mobile: '',
  remark: '',
  dueDateRange: undefined,
  dueTimeRange: undefined
})
const createFormRules: Record<string, Rule[]> = {
  siteNumbers: [{ required: true, message: '请选择场地', trigger: 'blur' }],
  dueType: [{ required: true, message: '请选择订场类型', trigger: 'blur' }],
  dueDateRange: [{ required: true, message: '请选择订场日期', trigger: 'change' }],
  dueTimeRange: [{ required: true, message: '请选择订场时间', trigger: 'change' }],
  customerName: [{ required: true, message: '请输入顾客姓名', trigger: 'change' }],
  mobile: [{ required: true, message: '请输入手机尾号', trigger: 'change' }]
}

const submitCreate = () => {
  createFormRef.value.validate().then(() => {
    createLoading.value = true
    createForm.dueStartTime = createForm!.dueTimeRange![0]!.format('HH:mm')
    createForm.dueEndTime = createForm!.dueTimeRange![1]!.format('HH:mm')
    createForm.dueStartDate = createForm!.dueDateRange![0]!.format('YYYY-MM-DD')
    createForm.dueEndDate = createForm!.dueDateRange![1]!.format('YYYY-MM-DD')
    addVenueReservation(createForm)
      .then(() => {
        message.success('预定场地成功')
        emit('createSuccess')
        cancelCreate()
      })
      .catch(() => {
        createLoading.value = false
      })
  })
}

const cancelCreate = () => {
  createFormRef.value.resetFields()
  emit('update:createModel', false)
  createLoading.value = false
}

const disabledTime = (_now: Dayjs, _type: 'start' | 'end') => {
  const disabledHours: number[] = []
  const startHour = dayjs(venueInfo.value.startTime, 'HH:mm').hour()
  const endHour = dayjs(venueInfo.value.endTime, 'HH:mm').hour() + 1
  for (let i = 0; i < startHour; i++) {
    disabledHours.push(i)
  }
  for (let i = endHour; i < 24; i++) {
    disabledHours.push(i)
  }
  return {
    disabledHours: () => disabledHours
  }
}

const getDefault = () => {
  createForm.dueDateRange = [dayjs(currentDate.value), dayjs(currentDate.value)]
  createForm.siteNumbers = createVenue.value
  if (createTime.value) {
    createForm.dueTimeRange = [
      dayjs(createTime.value, 'HH:mm'),
      dayjs(createTime.value, 'HH:mm').add(30, 'minute')
    ]
  } else {
    createForm.dueTimeRange = undefined
  }
}

watch(
  () => props.createModel,
  (val) => {
    val && getDefault()
  }
)
</script>
<style lang="less" scoped>
.input-01 {
  width: 400px;
}
</style>
